<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/news.css}" media="all"/>
</head>
<body class="childrenBody" style="width:1600px;">
<blockquote class="layui-elem-quote news_search">
    <form id="searchForm" name="searchForm" class="layui-form" action="/user/userList.html">
        <input type="hidden" id="pageNum" name="pageNum" th:value="${page.pageNum}"/>
        <input type="hidden" id="pageSize" name="pageSize" th:value="${page.pageSize}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名ID:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="openId" th:value="${user}?${user.openId}"/>
            </div>
            <label class="layui-form-label">用户昵称:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="nickname" th:value="${user}?${user.nickname}"/>
            </div>
            <!--  <label class="layui-form-label">实名状态:</label>
                 <div class="layui-input-inline">
                     <select name="realnamed" id="realnamed" lay-filter="realnamed">
                         <option value="">请选择查询认证状态</option>
                         <option value="1" th:selected="${user} ne null  and ${user.realnamed == 1}">已实名</option>
                         <option value="0" th:selected="${user} ne null  and ${user.realnamed == 0}">未实名</option>
                     </select>
                 </div> -->
            <button class="layui-btn search_btn"><i class="layui-icon">&#xe615;</i>查询</button>
        </div>
    </form>
</blockquote>
<div class="layui-form news_list">
    <table class="layui-table">
        <colgroup>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <thead>
        <tr>
            <th>用户ID</th>
            <th>头像</th>
            <th>昵称</th>
            <th>手机号</th>
            <!-- <th>生日</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>所属地域</th>
            <th>是否实名</th>
            <th>注册时间</th>
            <th>操作</th> -->
        </tr>
        </thead>
        <tbody class="news_content">
        <th:block th:if="${not #lists.isEmpty(page.list)}">
            <tr th:each="item:${page.list}">
                <td th:text="${item.openId}"></td>
                <td><img th:src="${item.avatar}" style="width:70,height=70"></img></td>
                <td th:text="${item.nickname}"></td>
                <td th:text="${item.mobile}"></td>
                <!-- <td  th:text="${item.birth}"></td>
                <td  th:text="${item.mobile}"></td>
                <td  th:text="${item.email}"></td>
                <td  th:text="${item.areaId}"></td>
                <th:block th:switch="${item.realnamed}">
                    <td  th:case="0">未实名</td>
                    <td  th:case="1">已实名</td>
                </th:block>
                <td  th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                <td>
                    <a th:data="${item.id}" class="layui-btn layui-btn-mini info">查看</a>
                    <a th:data="${item.id}" class="layui-btn layui-btn-danger layui-btn-mini frozen">冻结</a>
                    <a th:data="${item.id}" class="layui-btn layui-btn-mini unfrozen"> 解冻</a>
                    <a th:data="${item.id}" th:remove="${item.locked == 0} ?none:all" class="layui-btn layui-btn-danger layui-btn-mini lock">锁定</a>
                    <a th:data="${item.id}" th:remove="${item.locked == 1} ?none:all"class="layui-btn layui-btn-mini unlock">解锁</a>
                </td> -->
            </tr>
        </th:block>
        </tbody>
    </table>
</div>
<div id="paged" align="right"></div>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/jquery/jquery-3.2.1.min.js}"></script>
</body>
<script th:inline="javascript">
    layui.use(['laypage', 'form'], function () {
        var laypage = layui.laypage, $ = layui.jquery;
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        //执行一个laypage实例
        laypage.render({
            elem: 'paged', //注意，这里的 test1 是 ID，不用加 # 号
            curr: [[${page.pageNum}]],
            count: [[${page.total}]], //数据总数，从服务端得到
            limit: [[${page.pageSize}]],
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
            jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                var limit = obj.limit;
                $("#pageSize").val(limit);
                $("#pageNum").val(curr);
                if (!first) {
                    $("#searchForm").submit();
                }
            }
        });

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });

    layui.use('layer', function () {
        var layer = layui.layer, $ = layui.jquery;

        $(".lock").bind("click", function () {
            var id = $(this).attr('data');
            layer.confirm('确定要锁定该用户吗?', {icon: 3, title: '提示'}, function (index) {
                $.post('updateLock', {userId: id, lock: 1}, function (data) {
                    if (data == 'succ') {
                        layer.msg("锁定成功")
                        $("#searchForm").submit();
                    } else {
                        layer.msg("锁定失败")
                    }
                });
            });
        });
        $(".unlock").bind("click", function () {
            var id = $(this).attr('data');
            layer.confirm('确定要解锁该用户吗?', {icon: 3, title: '提示'}, function (index) {
                $.post('updateLock', {userId: id, lock: 0}, function (data) {
                    if (data == 'succ') {
                        layer.msg("解锁成功")
                        $("#searchForm").submit();
                    } else {
                        layer.msg("解锁失败")
                    }
                });
            });
        });

        /**
         * 查看
         */
        $(".info").bind("click", function () {
            var id = $(this).attr('data');
            //Ajax获取
            form_html(id, '查看用户信息');
        });

        function form_html(id, title) {
            $.post('userInfo.html', {userId: id}, function (data) {
                layer.open({
                    type: 1,
                    title: title
                    , area: ['1000px', '460px']
                    , shade: 0
                    , content: data
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        };
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
            , format: 'yyyy-MM-dd HH:mm:ss'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
            , format: 'yyyy-MM-dd HH:mm:ss'
        });
    });
</script>
</html>